<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> -->
</head>

<body>
    全选：<input type="checkbox" id="int">
    <hr>
    姓名：<input type="checkbox" name="a">
    <br>
    年龄：<input type="checkbox" name="a">
    <br>
    电话：<input type="checkbox" name="a">
    <br>
    邮箱：<input type="checkbox" name="a">
    <br>
    性别：<input type="checkbox" name="a">
    <br>
    民族：<input type="checkbox" name="a">
    <br>
    <!-- <button>提交</button> -->

    <!-- <button id="but1">添加</button> -->
    <!-- <input type="text" id="int">
    <div class="box1"><p>123</p></div>
    <div class="box2">456</div>
    <div class="box3">789</div>
    <p>111</p>
    <p>222</p>
    <p>333</p> -->
</body>
<script>
    var boxObj = document.getElementsByName('a')
    document.getElementById('int').addEventListener('change',function(){
        for(let i = 0; i < boxObj.length;i++){
            boxObj[i].checked = this,checked
        }
    })

    for (let j = 0; j < boxObj.length;j++){
        boxObj[j].addEventListener('change',function(){
            var flag = true
            for (let l = 0; l <boxObj.length;l++){
                
            }
        })
    }

    // $(function () {

        // $('input:eq(0)').on('click', function () {
        //     $('input').
        // })
        // window.onload = function () {
        //     var boxObj = document.getElementsByName('a')
        //     document.getElementById('int').addEventListener('change', function () {
        //         // console.log(this.checked);
        //         for (let i = 0; i < boxObj.length; i++) {
        //             boxObj[i].checked = this.checked
        //         }
        //     })

        //     for (let j = 0; j < boxObj.length; j++) {
        //         boxObj[j].addEventListener('change', function () {
        //             var flag = true
        //             for (let l = 0; l < boxObj.length; l++) {
        //                 if (!boxObj[l].checked) {
        //                     flag = false
        //                 }
        //             }
        //             document.getElementById('int').checked = flag
        //         })
        //     }

        // }

        // $('#bus').click(function(){
        //     var int1 = $('input:eq(0)').val()
        //     var int2 = $('input:eq(1)').val()
        //     var int3 = $('input:eq(2)').val()

        //     console.log($('int1').prop());

        // })


        // $('#but1').click(function(){
        //     // var str = $('#int').val()
        //     // $('.box1').append(str)

        //     // $('.box1').remove('p')

        //     // $('p').wrap()
        //     // $('p').unwrap()
        //     // $('p').wrapAll('<i></i>')
        //     // $('p').wrapInner('<b></b>')

        //     $('p').replaceAll('<h1></h1>')
        //     $('p').replaceWith(8520)
        // })
    // })
</script>

</html>